<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>就业工作考核数据分析系统</title>
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/dist/css/txt.wav.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/result.css}">
    <script th:src="@{/js/jquery.js}"></script>
    <style>
        form{
            display: inline-block;
        }
        @keyframes daoru {
            from {
                transform: scale(0.5)
            }
            to {
                transform: scale(1)
            }
        }
    </style>
    <script th:inline="javascript">var deleteMessages = [[${msg}]];if (deleteMessages !== null && deleteMessages !== undefined && deleteMessages !== '') {alert(deleteMessages);}</script>
</head>
<body>
<header>
    <h1>
        <!--<img th:src="@{/images/top1.png}"/>-->
        <span class="txtwav bounce">就业工作考核数据分析系统</span>
    </h1>
    <ul class="rt_nav">
        <li>
            <a th:href="@{/toindex}" th:target="_self" class="website_icon">
                <i class="fa fa-fire"></i>
                <span>站点首页</span>
            </a>
        </li>
        <li>
            <a class="quit_icon" th:href="@{/out}" th:target="_self">
                <i class="fa fa-send" ></i>
                <span>安全退出</span>
            </a>
        </li>
    </ul>
</header>
<aside class="aside_nav">
    <ul>
        <div class="closeche">
            <i class="fa fa-caret-right"></i>
        </div>
        <li>
            <a th:href="@{/toindex}" th:target="_self">欢迎登录</a>
        </li>
        <li>
            <a th:href="@{/sq/search}">生源质量指数</a>
        </li>
        <li class="active">
            <a th:href="@{/ts/search}">师资结构指数</a>
            <i class="fa fa-angle-double-right"></i>
        </li>
        <li>
            <a th:href="@{/em/search}">就业状态指数</a>
        </li>
        <li>
            <a th:href="@{/employmentRate/findAll}">就业率指数</a>
        </li>
        <li style="white-space : nowrap;">
            <a th:href="@{/es/search}">用人单位满意度指数</a>
        </li>
        <li>
            <a th:href="@{/employmentPractice/findAll}">就业创业实践指数</a>
        </li>
        <li>
            <a th:href="@{/year/to}">年份管理</a>
        </li>
        <li>
            <a th:href="@{/college/to}">学院管理</a>
        </li>
    </ul>
</aside>
<section class="wrap ">
    <div class="tables">
        <section>
            <h1 class="top-title">师 资 结 构 指 数</h1>
        </section>
        <section style="position: relative">
            <select class="selects" id="select" th:if="${query.getYear()!=null}">
                <option th:value="${query.getYear()}" hidden disabled selected th:text="${query.getYear()}"></option>
                <option value="">请选择年份</option>
                <option class="selects" th:each="year1:${allYear}" th:value="${year1.getYearName()}" th:text="${year1.getYearName()}"></option>
            </select>
            <select class="selects" id="select" th:if="${query.getYear()==null}">
                <option value="" selected>请选择年份</option>
                <option class="selects" th:each="year1:${allYear}" th:value="${year1.getYearName()}" th:text="${year1.getYearName()}"></option>
            </select>
            <input type="button" id="daoru" value="导入" class="result" />
            <!--用于导出数据-->
            <a id="export" th:if="${query.getYear()!=null}" th:href="@{/ts/export(year=${query.getYear()})}"><input type="button" id="export-bot" value="导出" class="result" /></a>
            <a id="export" th:if="${query.getYear()==null}" href="#"><input type="button" id="export-bot" value="导出" class="result" /></a>
                <input type="submit" id="delete" value="删除" class="result"/>
                <input type="file" name="upfile" id="file" style="display: none">
            <script>
                // 拿到所有操作的年份// 用于导出
                var select='';
                $('#select').change(function () {
                    select = $("#select option:selected").val();
                    var Url = "/ts/export?year=";
                    Url = Url+select;
                    if(select == ''){
                        Url='#';
                    }
                    $("#export").attr('href',Url);
                });
                $("#export-bot").click(function () {
                    if( $('#export').attr('href') == '#' ){
                        alert("请选择年份！")
                    }
                });
                // 导入
                $("#daoru").click(function () {
                    if ( select == ''){
                        alert('请选择年份!');
                    }else{
                        document.getElementById("file").click();
                    }
                });
                $('#file').change(function () {
                    $('#window-black').css('display','block');
                    var file =document.getElementById('file').files[0];
                    var formData = new FormData();
                    formData.append('year',select);
                    formData.append('file',file);
                    $.ajax({
                        type: "post",
                        url: "/ts/import",
                        processData:false,
                        data:formData,
                        contentType:false,
                        mimeType:"multipart/form-data",
                        dataType: "json",
                        success: function (data) {
                            $('#window-Tips').text(data.msg);
                            setTimeout(function () {
                                $('#window-black').css('display','none');
                                window.location.reload();
                            },1000);
                        }
                    })
                });
                //删除
                $('#delete').click(function () {
                    if(select == ''){
                        alert('请选择年份!')
                    }else{
                        $('#window-black').css('display','block');
                        $('#window-Tips').text('删除中，请稍后');
                        $.ajax({
                            type: "get",
                            url: "/ts/delete",
                            data: {
                                'year': select
                            },
                            dataType: "json",
                            success: function (data) {
                                $('#window-Tips').text(data.msg);
                                setTimeout(function () {
                                    $('#window-black').css('display','none');
                                    window.location.reload();
                                },1000);
                            }
                        })
                    }
                })
            </script>
            <!--用于查询搜索-->
            <div class="searrch" style="position: absolute;top: 0;right: 0;">
                <form th:action="@{/ts/search(year=${query.getYear()})}" th:method="get">
                    <input type="text" placeholder="请输入学院名称" th:value="${query.getCollege()}" name="college" class="ipt">
                    <input class="year"  th:if="${query.getYear()!=null}" th:value="${query.getYear()}" type="text" name="year" style="display: none">
                    <input class="year"  th:if="${query.getYear()==null}" type="text" name="year" style="display: none">
                    <input type="submit" class="submit">
                </form>
            </div>
        </section>
        <div class="resultform">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>学院</th>
                    <th>在校生数</th>
                    <th>教师总数</th>
                    <th>研究生学位教师总数</th>
                    <th>高级职务教师总数</th>
                    <th>生师比</th>
                    <th>研究生学位教师占专任教师比例</th>
                    <th>高级职务教师占专任教师比例</th>
                    <th>生师比合格值</th>
                    <th>生师比积分</th>
                    <th>研究生学位教师积分</th>
                    <th>高级职务教师积分</th>
                    <th>生师比33.7</th>
                    <th>高学历教师占比32.9</th>
                    <th>高职称教师占比33.9</th>
                    <th>师资结构指数11.07</th>
                    <th>年份</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="teacher: ${allTeachersStructure}">
                    <td th:text="${teacher.getCollegeName()}"></td>
                    <td th:text="${teacher.getStuNum()}"></td>
                    <td th:text="${teacher.getTeaNum()}"></td>
                    <td th:text="${teacher.getGraNum()}"></td>
                    <td th:text="${teacher.getSenNum()}"></td>
                    <td th:text="${teacher.getB21()}"></td>
                    <td th:text="${teacher.getB22()}"></td>
                    <td th:text="${teacher.getB23()}"></td>
                    <td th:text="${teacher.getQualified()}"></td>
                    <td th:text="${teacher.getM1()}"></td>
                    <td th:text="${teacher.getM2()}"></td>
                    <td th:text="${teacher.getM3()}"></td>
                    <td th:text="${teacher.getW1()}"></td>
                    <td th:text="${teacher.getW2()}"></td>
                    <td th:text="${teacher.getW3()}"></td>
                    <td th:text="${teacher.getA2()}"></td>
                    <td th:text="${teacher.getYear()}"></td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 分页 -->
    <div class="fenye" style="text-align:center" th:if="${pages > 0}">
        <ul class="pagination" th:if="${pages > 1}">
            <li th:if="${current == 1}"><a class="noclick" href="javascript:;">首页</a></li>
            <li><a th:if="${current > 1}" th:href="@{/ts/search(pageNum=1,year=${query.getYear()},college=${query.getCollege()})}">首页</a></li><!--//跳转至第一页-->
            <li><a th:if="${current > 1}" th:href="@{/ts/search(pageNum=${current-1},year=${query.getYear()},college=${query.getCollege()})}">上一页</a></li>
            <!--//请求页数-1-->
            <li class="active" th:each="i:${#numbers.sequence(1,pages)}">
                <!--//从1到总页数遍历，并赋值给i    TotalPages&ndash;&gt;总页数-->
                <a th:if="${i > current-5} and ${i < current+5} and ${i == current}" class="pageOne"
                   style="background-color: #18b985;border: 1px solid #ddd;" href="javascript:void(0);"
                   th:text="${i}">#</a>
                <!--//限制显示页数的条数  4到6个页数   而且等于当前页，不能点击-->
                <a th:if="${i > current-5} and ${i < current+5} and ${i != current}"
                   th:href="@{/ts/search(pageNum=${i},year=${query.getYear()},college=${query.getCollege()})}" th:text="${i}"
                   style="color: #000000;background-color: #fff;border: 1px solid #ddd;cursor: pointer;"
                   class="hoveras">#</a><!--//限制显示页数的条数  4到6个页数-->
            </li>
            <li th:if="${current != pages}"><a
                    th:href="@{/ts/search(pageNum=${current+1},year=${query.getYear()},college=${query.getCollege()})}">下一页</a></li><!--//请求页数+1-->
            <li th:if="${current == pages}"><a
                    class="noclick" href="javascript:;">尾页</a></li>
            <li th:if="${current != pages}"><a
                    th:href="@{/ts/search(pageNum=${pages},year=${query.getYear()},college=${query.getCollege()})}">尾页</a></li><!--//跳转至第Number页-->
        </ul>
    </div>
</section>
<div id="window-black" style="display: none;width: 100%;height: 100%;background:rgba(0,0,0,0.5);position: fixed;z-index: 9;top: 0;left: 0;">
    <div style="width: 240px;height: 30px;position: absolute;top: 50%;left: 50%;margin-top: -15px;margin-left: -120px;">
        <div style="width: 25px;height: 25px;background-color: white;border-radius: 100%;margin: 0 15px;float: left;animation: daoru 1s 0s infinite;"></div>
        <div style="width: 25px;height: 25px;background-color: white;border-radius: 100%;margin: 0 15px;float: left;animation: daoru 1s 0.1s infinite;"></div>
        <div style="width: 25px;height: 25px;background-color: white;border-radius: 100%;margin: 0 15px;float: left;animation: daoru 1s 0.2s infinite;"></div>
        <div style="width: 25px;height: 25px;background-color: white;border-radius: 100%;margin: 0 15px;float: left;animation: daoru 1s 0.3s infinite;"></div>
    </div>
    <div id="window-Tips" style="color: white;font-size: 30px;width: 300px;height: 40px;position: absolute;top: 50%;left: 50%;text-align: center;margin-left: -150px;margin-top: 50px;">导入中，请稍后</div>
</div>
</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/dist/js/txt.wav.min.js}"></script>
<script th:src="@{/js/result.js}"></script>
<script type="text/javascript">
    window.onload=function (ev) {
        $(function() {
            //确定文档高度
            var winheight = $(window).height();
            winheight -= 70;
            $('.wrap').css('height', winheight);
            //点击缩回
            $('.closeche').on('click', function() {
                if($('.aside_nav').css('left') == '0px') {
                    $('.aside_nav').css('left', '-210px');
                    $('.wrap').css({
                        'width': '95%',
                        'margin-left': '40px'
                    });
                } else {
                    $('.aside_nav').css('left', '0px');
                    $('.wrap').css({
                        'width': '',
                        'margin-left': '258px'
                    })
                }
            })
        });
    }
</script>
</html>